<template>
  <drag-div>
    <div slot="left" class="m" style="height: 100%; margin: 0">
      <left-workflow-type
        @handleNodeClick="handleNodeClick"
      ></left-workflow-type>
    </div>
    <div slot="right" style="padding: 10px">
      <el-row>
        <box-border class="p10">
          <el-col :span="24">
            <div>
              <el-row :gutter="4">
                <el-form :inline="true">
                  <el-form-item label="标题:">
                    <el-input
                      placeholder="请输入标题"
                      v-model="searchDto.title"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="发起人:">
                    <el-input
                      placeholder="请输入发起人"
                      v-model="searchDto.sender"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="步骤:">
                    <el-select
                      v-model="searchDto.stepName"
                      placeholder="请选择审批步骤"
                    >
                      <el-option
                        v-for="(item,index) in stepMap"
                        :key="index"
                        :label="item.label"
                        :value="item.label"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="时间:">
                    <el-date-picker
                      v-model="value4"
                      type="daterange"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                    ></el-date-picker>
                  </el-form-item>
                  <el-form-item class="clear_item-margin-bottom">
                    <el-button
                      type="primary"
                      icon="el-icon-search"
                      @click="getPageData()"
                      >查询
                    </el-button>
                    <el-button
                      type="primary"
                      icon="el-icon-s-open"
                      @click="clear()"
                      >重置
                    </el-button>
                  </el-form-item>
                </el-form>
              </el-row>
            </div>
            <div class="table_content">
              <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="全部" name="all"></el-tab-pane>
              </el-tabs>
              <page-table
                ref="multipleSelection"
                :page-data="pageData"
                :loading="loading"
                :do-get-page-data="getPageData"
              >
                <el-table-column
                  width="220"
                  prop="title"
                  show-overflow-tooltip
                  label="标题"
                  align="left"
                >
                  <template slot-scope="scope">
                    <span @click="taskEdit(scope.row)" style="cursor: pointer">
                      <span v-if="scope.row.type === 'BACK'" style="color: red"
                        >【退回】</span
                      >
                      <span
                        v-if="scope.row.priority === 'SPECIAL_URGENT'"
                        style="color: red"
                        >【特急】</span
                      >
                      <a class="task_title_a">{{ scope.row.title }}</a>
                    </span>
                  </template>
                </el-table-column>
                <el-table-column
                  show-overflow-tooltip
                  prop="flowName"
                  label="流程"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="stepName"
                  label="步骤"
                  align="center"
                  show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                  prop="senderName"
                  label="发起人"
                  show-overflow-tooltip
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  show-overflow-tooltip
                  prop="receiveTime"
                  label="接收日期"
                  align="center"
                >
                  <!--                  <template slot-scope="scope">-->
                  <!--                    <span>{{ scope.row.receiveTime | dataTime }}</span>-->
                  <!--                  </template>-->
                </el-table-column>
                <el-table-column
                  prop="type"
                  label="停留时间"
                  align="center"
                  show-overflow-tooltip
                >
                  <template slot-scope="scope">
                    <span>{{ scope.row.receiveTime | getWaitDays }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="status" label="状态" align="center">
                  <template slot-scope="scope">
                    <sz-badge
                      :value="
                        scope.row.status | keyText('WORKFLOW_TASK_STATUS')
                      "
                      type="warning"
                    ></sz-badge>
                  </template>
                </el-table-column>
                <el-table-column
                  label="管理"
                  width="150"
                  align="center"
                  fixed="right"
                >
                  <template slot-scope="scope">
                    <el-button
                      type="text"
                      size="mini"
                      @click="showFlowNode(scope.row)"
                    >
                      流程轨迹
                    </el-button>
                  </template>
                </el-table-column>
              </page-table>
            </div>
          </el-col>
        </box-border>

        <el-dialog
          :close-on-click-modal="false"
          :visible.sync="showFlowNodeHistory"
          v-if="showFlowNodeHistory"
          title="流程轨迹:"
          width="40%"
          destroy-on-close
        >
          <el-row>
            <el-col>
              <flow-node-history :task-id="curTaskId"></flow-node-history>
            </el-col>
            <el-col :span="24" class="mt20" slot="footer">
              <span>
                <el-button size="small" @click="showFlowNodeHistory = false"
                  >取消</el-button
                ></span
              >
            </el-col>
          </el-row>
        </el-dialog>
      </el-row>
    </div>
  </drag-div>
</template>
<script>
import { mapGetters } from "vuex";
import flowNodeHistory from "./flowNodeHistory";
import leftWorkflowType from "./leftWorkflowType";
import Moment from "moment";

export default {
  name: "toDoList",
  created() {
    this.initData();
  },
  mounted() {
    let that = this;
    if (this.$route.query.openType) {
      that.openType = this.$route.query.openType;
    }
    let loop = setInterval(function () {
      let tag = window.localStorage.getItem("wait");
      if (tag === "refresh") {
        clearInterval(loop);
        that.getPageData();
      }
    }, 1);
  },
  watch: {
    $route(to, from) {
      console.log(to, from);
      this.initData();
    },
  },
  data() {
    return {
      openType: "blank", // blank外部打开 inner内部打开；默认外部
      value4: [],
      activeName: "all",
      showFlowNodeHistory: false,
      loading: false,
      searchDto: {
        categoryId: "",
        pageSize: 10,
        pageIndex: "",
        title: "",
        sender: "",
        flowId: "",
        startTime: "",
        endTime: "",
        status: "0",
        stepName:""
      },
      pageData: {},
      curTaskId: "", // 当前任务id
      stepMap:[
        {label:'残联终审',value:'残联终审'},
        {label:'残联初审',value:'残联初审'}
      ]
    };
  },
  computed: {
    ...mapGetters({}),
  },
  methods: {
    initData() {
      this.searchDto.flowId = this.$route.query.flowId;
      this.getPageData();
    },
    handleClick(tab, event) {
      let status = "all";
      switch (tab.paneName) {
        case "all":
          status = "all";
          break;
      }
    },
    // 显示流程轨迹面板
    showFlowNode(row) {
      this.curTaskId = row.id;
      console.log(this.curTaskId);
      this.showFlowNodeHistory = true;
    },
    // 跳转任务处理
    taskEdit(row) {
      let tabTitle = "";
      if (this.$route.query.openType) {
        this.openType = this.$route.query.openType;
      }
      if (this.$route.query.tabTitle) {
        tabTitle = this.$route.query.tabTitle;
      }
      if (this.openType === "blank") {
        let routeData = this.$router.resolve({
          path: "/workflow/apply",
          query: { flowId: row.flowId, taskId: row.id },
        });
        // this.openPage(routeData.href, "wait");
        this.openTabPage(routeData.href);
      } else {
        this.$router.push({
          name: "workflowApplyInner",
          query: { flowId: row.flowId, taskId: row.id, tabTitle, cr: true },
        });
      }
    },

    // 左侧分类树的单击事件
    handleNodeClick(val) {
      this.searchDto = {
        categoryId: "",
        pageSize: 10,
        pageIndex: "",
        title: "",
        sender: "",
        flowId: "",
        startTime: "",
        endTime: "",
        status: "0",
      };
      if (val.type !== "CATEGORY") {
        this.searchDto.flowId = val.id;
      } else {
        this.searchDto.categoryId = val.id;
      }

      this.getPageData();
    },
    // 工作待办任务分页列表
    getPageData(val) {
      this.searchDto.startTime = "";
      this.searchDto.endTime = "";
      if (this.value4 && this.value4.length > 0) {
        this.searchDto.startTime = Moment(this.value4[0]).format("YYYY-MM-DD");
        this.searchDto.endTime = Moment(this.value4[1]).format("YYYY-MM-DD");
      }
      let tem = Object.assign(this.searchDto, val);
      this.API.getWorkflowTaskPageList(tem).then((res) => {
        this.pageData = res.data;
        window.localStorage.setItem("wait", "");
      });
    },
    //数据待办任务删除
    delWorkForm(row) {
      this.$confirm("确认删除当前待办任务?", "提示", {})
        .then(() => {
          let tem = {
            id: row.id,
          };
          this.API.deleteWorkflowFormById(tem).then((res) => {
            this.success("删除成功");
            this.getPageData();
          });
        })
        .catch(() => {});
    },
    clear() {
      this.searchDto = {
        categoryId: "",
        pageSize: 10,
        title: "",
        sender: "",
        flowId: "",
        startTime: "",
        endTime: "",
        status: "0",
      };
      this.value4 = [];
      this.getPageData();
    },
  },
  components: {
    flowNodeHistory,
    leftWorkflowType,
  },
};
</script>

<style scoped></style>
